<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>注册 Register</title>
    <link rel="stylesheet" th:href="@{/css/base.css}">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            -webkit-appearance: none;
            color: #dcdada;
            font-size: 20px;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        input, textarea {
            outline: none;
            border: none;
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 20px;
            resize: vertical;
            background: #272525;
            color: #a19f9f;
        }


        .container {
            background-color: #111;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
            width: 90%;
            max-width: 400px;
            margin: 0 auto;
        }

        h2 {
            text-align: center;
            color: #ffffff;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin: 0.5rem 0 0.2rem;
            font-size: 0.9rem;
            color: #ccc;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"] {
            padding: 0.6rem;
            border-radius: 6px;
            border: none;
            background-color: #2a2a2a;
            color: #fff;
            margin-bottom: 1rem;
        }

        input::placeholder {
            color: #888;
        }

        button {
            padding: 0.6rem;
            border: none;
            border-radius: 6px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            margin-top: 0.5rem;
        }

        button:hover {
            background-color: #0056b3;
        }

        .link {
            margin-top: 1rem;
            text-align: center;
        }

        .link a {
            color: #66b0ff;
            text-decoration: none;
            font-size: 0.9rem;
        }


    </style>
</head>
<body>

<div th:replace="~{common-page/header.html :: myHeader}"></div>

<br><br>

<div class="container">
    <h2>注册 Register </h2>
    <form action="/register" method="post">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" required placeholder="设置用户名">

        <label for="email">邮箱</label>
        <input type="email" id="email" name="email" required placeholder="输入邮箱">

        <label for="password">密码</label>
        <input type="password" id="password" name="password" required placeholder="设置密码">

        <button type="submit">注册 Register  </button>
    </form>
    <br><br>
    <div class="link">
        <span>已有账户？</span>
        <a href="/login">  登录  Login </a>
    </div>
</div>



<!--<img th:src="@{/images/index/bg-77125.jpg}"/>-->
<!--<h3 th:text="${comment.likes} + '  likes'"></h3>-->
<!--<button th:onclick="'delete(' + ${user.id} + ')'"></button>-->

<!--<input th:value="${todo_data.aaaa}"/>-->
<!--<textarea th:field="${todo_data.aaaaa}"></textarea>-->

<!--<div th:each="item, iterStat : ${users}">-->
<!--    th:href="@{'/user/'+${item.id}}"-->
<!--    <p th:text="${iterStat.index} ">序号</p>-->
<!--    <p th:text="'价格  : '+${item.money}"></p>-->
<!--</div>-->

<!--获取第一个 元素:-->
<!--<div th:with="user=${users[0]}">-->
<!--    <h2 th:text="${user}"></h2>-->
<!--</div>-->

<!-- -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 判断 null-->
<!--<div th:if="${#lists.isEmpty(pw_list)}">-->
<!--    <h1> 没搜到相对应内容 </h1>-->
<!--</div>-->

<!--<div th:if="${pw_list} != null">-->
<!--    <div th:each="pw:${pw_list}">-->
<!--        <p th:text="${pw.password}"></p>-->
<!--    </div>-->
<!--</div>-->

<div style="height: 500px; "></div>
</body>

<script th:src="@{/js/send_fetch.js}"></script>

<script th:inline="javascript">

    // let all_data = [[${all_data}]];
    // console.log(all_data);

    // var textarea = document.querySelector('textarea');
    // textarea.addEventListener('input', (e) => {
    //     textarea.style.height = '100px';
    //     textarea.style.height = (e.target.scrollHeight + 20) + 'px';
    // });

</script>
</html>


